$(function(){
    load() //让列表显示
    //文本框绑定键盘事件
    $("#title").on("keydown",function(event){
        console.log(1212);
        
     //键旁编码判断
        if(event.keyCode===13){
            if($(this).val().trim() !== ""){//trim()去除字符串两侧的空格
                var data=getDate()  //获取本地存储数据
                //将数组进行更新数据，把最新数据追加给数组
                data.push({title:$(this).val(),done:false});
                saveDate(data);   // 保存到本地数据
                load();           // 渲染加载到页面
                $(this).val("")   // 让文本框为空
            }
        }
    })
    // 2，删除待办事项
$("ol,ul").on("click", "a", function(){
    var data=getDate();   // 获取本地数据
    var index=$(this).attr("index");   // attr获取自定义属性index，拿到索引
    // splice(index，num) 删除数组对象 index为开始删除位置 num为删除几个 congindex开始删除
    data.splice(index,1);
    saveDate(data);
    load();
})
// 3,正在进行和已经完成部分
$("ol,ul").on("click","input",function(){
    var data=getDate();
    // 利用a获取用户点击的是第几个复选框 ???
    var index=$(this).siblings("a").attr("index");
    //修改数据 打他[index].属性名 获取固有属性的prop
    data[index].done=$(this).prop("checked");
    saveDate(data);
    load();
})
// 4,修改事项，已经对标签的添加
$("ol,ul").on("dblclick","p", function(){
    var data=getDate();
    var index=$(this).siblings("a").attr("index");
    // p标签里原来内容获取过来
    var str=$(this).text();
    // 创建一个文本框添加今p标签里
    $(this).prepend('<input type="text" />');
    // 将原来的内容给文本框，并让其为(select)选中状态
    var input = $(this).children();
    input.val(str);
    input.select();
    //当文本失去焦点的时，将修改过的文本框的内容给title
    $(input).on("blur",function(){
        data[index].title=input.val();
        saveDate(data);
        load();
    })
    //按下回车键也可以保存修改
    $(input).on("keyup",function(e){
        if(e.keyCode===13){
            //调用点击事件
            this.blur()
        }
    })
})
// 获取本地的储存数据
function getDate(){
    var data=localStorage.getItem("todolist");  //获取到的数据复制给data
    if(data !== null){   // 如果本地有数据   ，，则返回本地数据
        return JSON.parse(data);    // 本地只能存储字符串 将获取到的字符串转换成数组形似返回
    }else{
        return [];   //如果本地没有数据，就返回一个空数组
    }
}

// 保存本地存储数据
function saveDate(data) {
    // 用JSON.stringify()将数组转化成字符串保存到本地存储
    localStorage.setItem("todolist", JSON.stringify(data));
}
//  加载渲染数据
function load(){
    var data=getDate();   // 先获取本地数据

    // 便利本地储存数据 将他们添加到列表中
    $("ol,ul").empty();   // 遍历之前先清空列表
    var doneCount = 0;  // 已经完成的个数
    var todoCount = 0;  // 正在进行的个数
    $.each(data,function(inx,key){//inx索引 key为遍历对象
        if(key.done) {
            $("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + key.title + "</p> <a href='javascript:;' index=" + inx + "></a></li>");
            doneCount++;  // 每添加一个li，已完成数加一
        } else {
            $("ol").prepend("<li><input type='checkbox'> <p>" + key.title + "</p> <a href='javascript:;' index=" + inx + "></a></li>");
            todoCount++;
        }
    })
    $("#donecount").text(doneCount);
    $("#todocount").text(todoCount);
}
})

